import React, { HTMLAttributes } from 'react';
import classnames from 'classnames/dedupe';
import BasePropsType from './interface';
import createFromIconfont from './IconFont';
import "./icon.css"
const INNER_SVG_PROPS = {
  // width: '1em',
  // height: '1em',
  // fill: 'currentColor',
  // viewBox: '0 0 32 32',
};

export type IconProps = {
  prefixCls?: string;
  height?: any;
  width?: any;
} & BasePropsType &
  HTMLAttributes<HTMLElement>;

interface CompoundedComponent
  extends React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLElement>> {
  createFromIconfont: typeof createFromIconfont;
}

const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
  const {
    className,
    type,
    style,
    prefixCls,
    theme,
    size,
    children,
    component: SvgComponent,
    viewBox,
    ...rest
  } = props;
  const cls = classnames(prefixCls, className, {
    [`${prefixCls}--${type}`]: !!type,
    [`${prefixCls}--${theme}`]: !!theme,
    [`${prefixCls}--${size}`]: !!size,
  });

  const newProps = {
    className: cls,
    style,
    type,
    theme,
    size,
    ...rest,
  };
  let color = newProps.color;

  // svg component > children by iconfont > type
  if (SvgComponent) {
    // INNER_SVG_PROPS.viewBox = viewBox!;
    return (
      <i {...newProps} ref={ref}>
        {/* <SvgComponent color={color} {...INNER_SVG_PROPS}>{children}</SvgComponent> */}
        {React.createElement(SvgComponent, {color,width:props.width, height: props.height, children})}
      </i>
    );
  }

  if (children) {
    return (
      <i {...newProps} ref={ref}>
        <svg color={color} {...INNER_SVG_PROPS}>{children}</svg>
      </i>
    );
  }

  if (type) {
    const MyIcon = createFromIconfont('//at.alicdn.com/t/font_1285036_9ze0vm44z57.js'); // generated by iconfont.cn
    return <MyIcon {...newProps} />;
  }
  return null;
}) as CompoundedComponent;

Icon.createFromIconfont = createFromIconfont;

Icon.displayName = 'Icon';
Icon.defaultProps = {
  prefixCls: 'za-icon',
  theme: 'default',
  size: 'md',
  // viewBox: INNER_SVG_PROPS.viewBox,
};

export default Icon;
